<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="utf-8">
    <title>登录</title>
    <!-- Mobile specific metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- Force IE9 to render in normal mode -->
    <!--[if IE]>
    <meta http-equiv="x-ua-compatible" content="IE=9"/>
    <![endif]-->
    <meta name="author" content="SuggeElson"/>
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <meta name="application-name" content="sprFlat admin template"/>
    <!-- Import google fonts - Heading first/ text second -->
    <link rel='stylesheet' type='text/css'
          href='http://fonts.googleapis.com/css?family=Open+Sans:400,700|Droid+Sans:400,700'/>
    <!-- Css files -->
    <!-- Icons -->
    <link href="../../static/css/icons.css" th:href="@{/css/icons.css}" rel="stylesheet"/>
    <!-- jQueryUI -->
    <link href="../../static/plugins/jquery-ui/jquery-ui.css" th:href="@{/plugins/jquery-ui/jquery-ui.css}"
          rel="stylesheet"/>
    <!-- Bootstrap stylesheets (included template modifications) -->
    <link href="../../static/plugins/bootstrap/css/bootstrap.css" th:href="@{/plugins/bootstrap/css/bootstrap.css}"
          rel="stylesheet"/>
    <!-- Plugins stylesheets (all plugin custom css) -->
    <link href="../../static/css/plugins.css" th:href="@{/css/plugins.css}" rel="stylesheet"/>
    <!-- Main stylesheets (template main css file) -->
    <link href="../../static/css/main.css" th:href="@{/css/main.css}" rel="stylesheet"/>
    <!-- Custom stylesheets ( Put your own changes here ) -->
    <link href="../../static/css/custom.css" th:href="@{/css/custom.css}" rel="stylesheet"/>
    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/img/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/img/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/img/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="assets/img/ico/apple-touch-icon-57-precomposed.png">
    <link rel="icon" href="../../favicon.ico" th:href="@{/favicon.ico}" type="image/png">
    <!-- Windows8 touch icon ( http://www.buildmypinnedsite.com/ )-->
    <meta name="msapplication-TileColor" content="#3399cc"/>
</head>
<body class="login-page">
<!-- Start #login -->
<div id="login" class="animated bounceIn">
    <img id="logo" src="../../static/img/logo.png" th:src="@{/img/logo.png}" alt="sprFlat Logo">
    <!-- Start .login-wrapper -->
    <div class="login-wrapper">
        <ul id="myTab" class="nav nav-tabs nav-justified" role="tablist">
            <li class="nav-item">
                <a href="#log-in" class="nav-link active" data-toggle="tab" role="tab" aria-selected="true">登录</a>
            </li>
            <li class="nav-item">
                <a href="#register" class="nav-link" data-toggle="tab" role="tab" aria-selected="false">注册</a>
            </li>
        </ul>
        <div id="myTabContent" class="tab-content">

            <div th:if="${param.error}">
                <div class="alert alert-danger">
                    Invalid username or password.
                </div>
            </div>
            <div th:if="${param.logout}">
                <div class="alert alert-info">
                    You have been logged out.
                </div>
            </div>

            <div class="tab-pane fade active show" id="log-in" role="tabpanel" aria-labelledby="log-in">
                <form class="form-horizontal mt10" th:action="@{/login}" method="post" id="login-form" role="form">
                    <div class="form-group">
                        <div class="col-lg-12">
                            <input type="text" name="username" id="username" class="form-control left-icon"
                                   placeholder="请输入账号">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-lg-12">
                            <input type="password" name="password" id="password" class="form-control"
                                   placeholder="请输入密码">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-lg-12">
                            <div class="row">
                                <div class="col-lg-9">
                                    <input type="checkbox" name="remember" id="remember" value="option">
                                    <label class="form-check-label" for="remember">
                                        <small>下次自动登录?</small>
                                    </label>
                                </div>
                                <div class="col-lg-3">
                                    <a href="#">
                                        <small>忘记密码?</small>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
                    <div class="form-group">
                        <div class="col-lg-12">
                            <button class="btn btn-success btn-block" type="submit">登录</button>
                        </div>
                    </div>
                </form>
                <hr/>
            </div>
            <div class="tab-pane fade" id="register" role="tabpanel" aria-labelledby="register">
                <form class="form-horizontal mt20" action="#" id="register-form" role="form">
                    <div class="form-group">
                        <div class="col-lg-12">
                            <!-- col-lg-12 start here -->
                            <input id="email1" name="email" type="email" class="form-control left-icon"
                                   placeholder="Type your email">
                            <i class="ec-mail s16 left-input-icon"></i>
                        </div>
                        <!-- col-lg-12 end here -->
                    </div>
                    <div class="form-group">
                        <div class="col-lg-12">
                            <!-- col-lg-12 start here -->
                            <input type="password" class="form-control left-icon" id="password1" name="password"
                                   placeholder="Enter your password">
                            <i class="ec-locked s16 left-input-icon"></i>
                        </div>
                        <!-- col-lg-12 end here -->
                        <div class="col-lg-12 mt15">
                            <!-- col-lg-12 start here -->
                            <input type="password" class="form-control left-icon" id="confirm_password"
                                   name="confirm_passowrd" placeholder="Repeat password">
                            <i class="ec-locked s16 left-input-icon"></i>
                        </div>
                        <!-- col-lg-12 end here -->
                    </div>
                    <div class="form-group">
                        <div class="col-lg-12">
                            <!-- col-lg-12 start here -->
                            <button class="btn btn-success btn-block">Register</button>
                        </div>
                        <!-- col-lg-12 end here -->
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- End #.login-wrapper -->
</div>
<!-- End #login -->
<!-- Javascripts -->
<!-- Load pace first -->
<script src="../../static/plugins/pace/pace.min.js" th:src="@{/plugins/pace/pace.min.js}"></script>
<script src="../../static/plugins/jquery/jquery.js" th:src="@{/plugins/jquery/jquery.js}"></script>
<script src="../../static/plugins/jquery-ui/jquery-ui.js" th:src="@{/plugins/jquery-ui/jquery-ui.js}"></script>
<!-- Bootstrap plugins -->
<script src="../../static/plugins/bootstrap/js/bootstrap.js" th:src="@{/plugins/bootstrap/js/bootstrap.js}"></script>
<!-- Form plugins -->
<script src="../../static/plugins/icheck/icheck.js" th:src="@{/plugins/icheck/icheck.js}"></script>
<script src="../../static/plugins/jquery-validation/jquery.validate.js"
        th:src="@{/plugins/jquery-validation/jquery.validate.js}"></script>
<script src="../../static/plugins/jquery-validation/additional-methods.min.js"
        th:src="@{/plugins/jquery-validation/additional-methods.min.js}"></script>
<!-- Init plugins olny for this page -->
<script src="../../static/js/pages/login.js" th:src="@{/js/pages/login.js}"></script>
</body>
</html>